<template>
	<view>
		<!-- 导航栏 -->
		<view style="height: 10rpx;background: rgba(36,188,129,1);"></view>
		<view class="title" style="padding-top: 40rpx;">
			<view class="Indq">
				<text style="padding: 0 20rpx;">{{city}}</text>
				<image src="../../static/iconxl.png" mode=""></image>
			</view>
			<u-sticky>
				<!-- 只能有一个根元素 -->
				<view class="sticky">
					<view class="Ininp">
						<i></i>
						<navigator url="./SEEk/SEEk">
							<input style="margin-top: 5rpx;;" type="text" value="" placeholder="搜索" />
						</navigator>
					</view>
				</view>
			</u-sticky>
		</view>
		<!-- 轮播 -->
		<view style="height: 80rpx;background: rgba(36,188,129,1);"></view>
		<view class="LBimg">
			<view class="wrap">
				<u-swiper :list="list"></u-swiper>
			</view>
		</view>
		<!-- 种类 -->
		<view style="width: 92%;margin:0 auto;display: flex;flex-wrap: wrap ">
			<view class="tan25" v-for="(item,idx) in navigationdata" :key="idx">
				<image :src="item.icon" mode=""></image>
				<p class="fs12" style="text-align: center;">{{item.name}}</p>
			</view>

		</view>
		<!-- 广告 -->
		<view style="width: 95%;margin: 20rpx auto;">
			<image style="width: 100%;height: 204rpx;" :src="advertising.image" mode=""></image>
		</view>
		<!-- 附近商家 -->
		<u-sticky offset-top="120">
			<view class="FJsj" style="background: #FFFFFF;">
				<h1 class="fs16">附近商家</h1>
				<!-- style="display: flex;width: 100%;height: 80rpx;margin-top: 25rpx;" -->
				<view class="fs12">
					<u-dropdown ref="uDropdown">
						<u-dropdown-item v-model="all_sort" title="综合" :options="options1" @change="change1">
						</u-dropdown-item>
						<u-dropdown-item v-model="distance_sort" title="距离" :options="options3" @change="change2">
						</u-dropdown-item>
						<u-dropdown-item v-model="score_sort" title="评分" :options="options2" @change="change3">
						</u-dropdown-item>
					</u-dropdown>
				</view>
			</view>
		</u-sticky>

		<!-- 店铺 -->
		<view class="DPset">
			<!--  -->
			<view class="single"  @tap="jumpToDetails(merchant.id)">
				<image :src="merchant.avatar" mode=""></image>
				<view>
					<h5 class="fs14" style="font-weight: 700;">{{merchant.name}}</h5>
					<view class="spans">
						<image src="../../static/iconhxx.png" mode=""></image>
						<text style="color: rgba(241,116,68,1);margin-left: 10rpx;">{{merchant.score}}</text>
						<text style="color: rgba(136,136,136,1);margin-left: 10rpx;">{{merchant.month_sales}}</text>
						<text
							style=";float: right;color: rgba(136,136,136,1);white-space:nowrap;">{{merchant.distance}}{{merchant.delivery_time}}</text>
					</view>
					<text class="fs10" style="color: rgba(136,136,136,1);">起送价￥15 配送费￥0</text>
					<view class="text-DP fs10" style="margin-top:20rpx;">
						<text>{{merchant.activity[0].title}}</text>
						<text style="margin-left:25rpx ;">{{merchant.activity[1].title}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex'
	import qqmapsdk from '../Location/qqmap-wx-jssdk.js'

	export default {
		data() {
			return {
				title: 'Hello',
				list: [],
				advertising: [],
				navigationdata: [],
				city: '',
				merchant: '',
				distance_sort: 0,
				score_sort: 0,
				all_sort: 1,
				options1: [{
						label: '按销量排序',
						value: 1,
					},
					{
						label: '按配送费排序',
						value: 2,
					},
					{
						label: '按起送价排序',
						value: 3,
					}
				],
				options2: [{
					label: '由高到低',
					value: 1,
				}],
				options3: [{
					label: '由近到远',
					value: 1,
				}],
			}
		},
		onLoad() {
			this.gets()
			this.getlocation()
			const QQMapWX = new qqmapsdk({
				key: 'NFFBZ-PSN63-TXM3A-3YY23-7HCDO-YUBQ2key'
			});
		},
		methods: {
			open(index) {
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				this.$refs.uDropdown.highlight();
			},
			close(index) {
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				this.$refs.uDropdown.highlight(index);
			},
			change1(e) {
				this.all_sort = e
				// console.log(e)
				this.getlocation()
			},
			change2(e) {
				this.distance_sort = e
				// console.log(e)
				this.getlocation()
			},
			change3(e) {
				this.score_sort = e
				// console.log(e)
				this.getlocation()
			},
			jumpToDetails(id) {
				console.log(id)
				uni.navigateTo({
					url: "../Product/Product?id=" + id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			gets() {
				uni.request({
					url: "http://test.hanshupai.com/api/index",
					method: "GET",
					success: (res) => {
						let data = res.data.data
						// 轮播
						this.list = data.banner
						//广告数据
						this.advertising = data.adv[0]
						//导航数据
						this.navigationdata = data.menu
					}
				})

			},
			getlocation() {
				uni.getLocation({
					type: 'wgs84',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: res => {
						console.log(res)
						let location = {}
						location.longitude = res.longitude
						location.latitude = res.latitude
						this.$store.commit('Location', location)
						// 位置信息
						this.$request('api/location', {
							longitude: res.longitude,
							latitude: res.latitude
						}, "GET", {}).then(res => {
							this.city = res.data.title
						})
						// 附近商家
						this.$request('api/near', {
							page: 1,
							longitude: this.longitude,
							latitude: this.latitude,
							distance_sort: this.distance_sort,
							score_sort: this.score_sort,
							all_sort: this.all_sort
						}, "GET", {}).then(res => {
							this.merchant = res.data.list[0]
						})
					},
					fail: function() {
						uni.showToast({
							title: '获取地址失败，将导致部分功能不可用',
							icon: 'none'
						});
					}
				});
			}
		},
		computed: {
			...mapState(['avatar', 'nickname', 'longitude', 'latitude'])
		}
	}
</script>

<style scoped>
	.container {
		height: 200vh;
		margin-top: 150rpx;
	}

	.sticky {
		width: 750rpx;
		height: 120rpx;
		padding: 30rpx 0 0 10rpx;
		background: rgba(36, 188, 129, 1);
	}

	.title {
		height: 200rpx;
		background: rgba(36, 188, 129, 1);
	}

	.Indq {
		height: 60rpx;
		line-height: 60rpx;
		color: #FFFFFF;
	}

	.Indq>image {
		width: 25rpx;
		height: 32rpx;
		background: url(../../static/iconxl.png);
	}

	.Ininp {
		width: 60%;
		height: 56rpx;
		margin: 15rpx;
		border-radius: 12rpx;
		/* overflow: hidden; */
		background: #FFFFFF;
		display: flex;
	}

	.Ininp>i {
		display: inline-block;
		width: 28rpx;
		margin: 15rpx;
		height: 28rpx;
		background: url(../../static/Icons_Tint%20Color_Black.png) no-repeat;
	}

	.LBimg {
		width: 700rpx;
		height: 348rpx;
		margin: -35rpx auto;
		overflow: hidden;
	}

	.LBimg>image {
		width: 100%;
	}

	.Kind {
		width: 300rpx;
		margin: 20rpx auto;
	}

	.Kind>text {
		display: inline-block;
		width: 32rpx;
		height: 10rpx;
		margin: 0 30rpx;
		background-color: #2C405A;
	}

	.tan25 {
		width: 22%;
		margin: 10rpx;
	}

	.tan25>image {
		display: block;
		width: 120rpx;
		height: 132rpx;
		margin: 0 auto;
	}

	.FJsj {
		width: 95%;
		margin: 0 auto;
	}

	.w20 {
		width: 20%;
		text-align: center;
		position: relative;
	}

	.w20>i {
		display: inline-block;
		width: 18rpx;
		height: 10rpx;
		background: url(../../static/iconxia.png);
		position: absolute;
		left: 75%;
		top: 10rpx;
	}

	.DPset {
		width: 100%;

	}

	.single {
		width: 90%;
		height: 200rpx;
		margin: 60rpx auto;
		display: flex;
		border-bottom: 1rpx solid rgba(236, 236, 236, 1);
	}

	.single>image {
		padding: 20rpx;
		width: 142rpx;
		height: 144rpx;
	}

	.single>view {
		width: 60%;
		margin-left: 15rpx;
	}

	.spans {
		width: 100%;
		height: 28rpx;
		line-height: 28rpx;
		font-size: 20rpx;
	}

	.spans>image {
		display: inline-block;
		width: 18rpx;
		height: 18rpx;
		background: rgba(241, 116, 68, 1);
		margin-top: 3rpx;
	}

	.text-DP>text {
		display: inline-block;
		width: 106rpx;
		height: 36rpx;
		text-align: center;
		line-height: 36rpx;
		border-radius: 4px;
		color: rgba(255, 125, 77, 1);
		border: 1rpx solid rgba(255, 125, 77, 1);
	}
</style>
